<template>
	<view :style="videoModule.length <= 1 ? 'height:100vh' : 'height:100%'" style="background-color: #ffffff; height: 100%; width: 100vw; padding-bottom: 20upx;">
		<view class="videoenrollment-header">
			<view class="group-state-contain">
				<view :class="groupStatusIndex==index?'group-state-active':''" v-for="(item,index) in groupStatus" :key='index' data-index="index" @click="changeIndex(index)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 新上传视频排序 -->
		<scroll-view scroll-y="true" style="height: 82vh; background-color: #eaeaea;"
		  v-if="groupStatusIndex == 0"
		  @scrolltolower="LoadingVideoEnrollment">
			<view class="videoenrollment-content" v-for="(item,index) in videoModule" :key="index" v-if="groupStatusIndex == 0">
				<view class="mechanism-content-workscard-label" v-if="item.status == 0">审核中</view>
				<view class="mechanism-content-workscard-label-yes" v-if="item.status == 1">已通过</view>
				<view class="mechanism-content-workscard-label-no" v-if="item.status == 2">未通过</view>
				<button class="edit-btn" style="color: #ffffff;" type="default" @click="modifyVideo(item.id)">编辑</button>
				<image :src="item.head_img" mode="" style="width: 500upx; height: 620upx; margin: 0upx 45upx 30upx 45upx; border-radius: 20upx;"></image>
				<view class="" style="font-size: 28upx; font-weight: bold;">
					{{item.video_detail}}
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 20upx 0upx;"></view>
				<view class="">
					<view class="">
						<image :src="item.user_info.avatar" mode="" style="width: 70upx; height: 70upx; vertical-align: middle;border-radius: 80upx;"></image>
						<view class="" style="display: inline-block; margin-left: 20upx; vertical-align: middle;margin-top: 8upx;">
							<view class="" style="font-size: 26upx; font-weight: bold;">{{item.user_info.nickname}}</view>
							<view class="" style="font-size: 24upx;">{{item.create_time | formatDates}}</view>
						</view>
						<view class="hide-btn" type="default" @click="setVideo(item.id,'show',0,1)" v-if="item.is_show == 1">隐藏</view>
						<view class="hide-btn" type="default" @click="setVideo(item.id,'show',1,1)" v-if="item.is_show == 0">显示</view>
						<view class="" style="font-size: 24upx; margin-top: 20upx;">
							<view style="display: inline-block; margin-right: 30upx;">播放量：{{item.access_num}}</view>
							<view style="display: inline-block; margin-right: 30upx;">点赞量：{{item.like_num}}</view>
							<view style="display: inline-block;">分享量：{{item.share_num}}</view>
							<view class="topping-btn" type="default" @click="setVideo(item.id,'top',1,1)" v-if="item.is_top == 0">置顶</view>
							<view class="topping-btn" type="default" @click="setVideo(item.id,'top',0,1)" v-if="item.is_top == 1">取消置顶</view>
						</view>
					</view>
					<view style="height: 2upx; background-color: #F2F2F2; margin: 20upx 0upx;"></view>
					<view class="">
						<view class="" style="font-size: 28upx; display: inline-block; vertical-align: middle;">
							视频线索用户：<view class="" style="display: inline-block; color: #FF674E; margin: 0 10upx 0 20upx;">{{item.user_num}}</view>个
						</view>
						<view class="details-btn" type="default" @click="details(item.id)">详情</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 按获取线索量排序 -->
		<scroll-view scroll-y="true" style="height: 82vh; background-color: #eaeaea;"
		  v-if="groupStatusIndex == 1"
		  @scrolltolower="LoadingClues">
			<view class="videoenrollment-content" v-for="(item,index) in videoModuleClues" :key="index" v-if="groupStatusIndex == 1">
				<view class="mechanism-content-workscard-label" v-if="item.status == 0">审核中</view>
				<view class="mechanism-content-workscard-label-yes" v-if="item.status == 1">已通过</view>
				<view class="mechanism-content-workscard-label-no" v-if="item.status == 2">未通过</view>
				<button class="edit-btn" style="color: #ffffff;" type="default" @click="modifyVideo(item.id)">编辑</button>
				<image :src="item.head_img" mode="" style="width: 500upx; height: 620upx; margin: 0upx 45upx 30upx 45upx; border-radius: 20upx;"></image>
				<view class="" style="font-size: 28upx; font-weight: bold;">
					{{item.video_detail}}
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 20upx 0upx;"></view>
				<view class="">
					<view class="">
						<image :src="item.user_info.avatar" mode="" style="width: 70upx; height: 70upx; vertical-align: middle;border-radius: 80upx;"></image>
						<view class="" style="display: inline-block; margin-left: 20upx; vertical-align: middle;margin-top: 8upx;">
							<view class="" style="font-size: 26upx; font-weight: bold;">{{item.user_info.nickname}}</view>
							<view class="" style="font-size: 24upx;">{{item.create_time | formatDates}}</view>
						</view>
						<view class="hide-btn" type="default" @click="setVideo(item.id,'show',0,2)" v-if="item.is_show == 1">隐藏</view>
						<view class="hide-btn" type="default" @click="setVideo(item.id,'show',1,2)" v-if="item.is_show == 0">显示</view>
						<view class="" style="font-size: 24upx; margin-top: 20upx;">
							<view style="display: inline-block; margin-right: 30upx;">播放量：{{item.access_num}}</view>
							<view style="display: inline-block; margin-right: 30upx;">点赞量：{{item.like_num}}</view>
							<view style="display: inline-block;">分享量：{{item.share_num}}</view>
							<view class="topping-btn" type="default" @click="setVideo(item.id,'top',1,2)" v-if="item.is_top == 0">置顶</view>
							<view class="topping-btn" type="default" @click="setVideo(item.id,'top',0,2)" v-if="item.is_top == 1">取消置顶</view>
						</view>
					</view>
					<view style="height: 2upx; background-color: #F2F2F2; margin: 20upx 0upx;"></view>
					<view class="">
						<view class="" style="font-size: 28upx; display: inline-block; vertical-align: middle;">
							视频线索用户：<view class="" style="display: inline-block; color: #FF674E; margin: 0 10upx 0 20upx;">{{item.user_num}}</view>个
						</view>
						<view class="details-btn" type="default" @click="details(item.id)">详情</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 按播放量排序 -->
		<scroll-view scroll-y="true" style="height: 82vh; background-color: #eaeaea;"
		  v-if="groupStatusIndex == 2"
		  @scrolltolower="LoadingPlay">
			<view class="videoenrollment-content" v-for="(item,index) in videoModulePlay" :key="index" v-if="groupStatusIndex == 2">
				<view class="mechanism-content-workscard-label" v-if="item.status == 0">审核中</view>
				<view class="mechanism-content-workscard-label-yes" v-if="item.status == 1">已通过</view>
				<view class="mechanism-content-workscard-label-no" v-if="item.status == 2">未通过</view>
				<button class="edit-btn" style="color: #ffffff;" type="default" @click="modifyVideo(item.id)">编辑</button>
				<image :src="item.head_img" mode="" style="width: 500upx; height: 620upx; margin: 0upx 45upx 30upx 45upx; border-radius: 20upx;"></image>
				<view class="" style="font-size: 28upx; font-weight: bold;">
					{{item.video_detail}}
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 20upx 0upx;"></view>
				<view class="">
					<view class="">
						<image :src="item.user_info.avatar" mode="" style="width: 70upx; height: 70upx; vertical-align: middle;border-radius: 80upx;"></image>
						<view class="" style="display: inline-block; margin-left: 20upx; vertical-align: middle;margin-top: 8upx;">
							<view class="" style="font-size: 26upx; font-weight: bold;">{{item.user_info.nickname}}</view>
							<view class="" style="font-size: 24upx;">{{item.create_time | formatDates}}</view>
						</view>
						<view class="hide-btn" type="default" @click="setVideo(item.id,'show',0,3)" v-if="item.is_show == 1">隐藏</view>
						<view class="hide-btn" type="default" @click="setVideo(item.id,'show',1,3)" v-if="item.is_show == 0">显示</view>
						<view class="" style="font-size: 24upx; margin-top: 20upx;">
							<view style="display: inline-block; margin-right: 30upx;">播放量：{{item.access_num}}</view>
							<view style="display: inline-block; margin-right: 30upx;">点赞量：{{item.like_num}}</view>
							<view style="display: inline-block;">分享量：{{item.share_num}}</view>
							<view class="topping-btn" type="default" @click="setVideo(item.id,'top',1,3)" v-if="item.is_top == 0">置顶</view>
							<view class="topping-btn" type="default" @click="setVideo(item.id,'top',0,3)" v-if="item.is_top == 1">取消置顶</view>
						</view>
					</view>
					<view style="height: 2upx; background-color: #F2F2F2; margin: 20upx 0upx;"></view>
					<view class="">
						<view class="" style="font-size: 28upx; display: inline-block; vertical-align: middle;">
							视频线索用户：<view class="" style="display: inline-block; color: #FF674E; margin: 0 10upx 0 20upx;">{{item.user_num}}</view>个
						</view>
						<view class="details-btn" type="default" @click="details(item.id)">详情</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view @click="addVideo" class="share-btn">添加短视频</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupStatus:['新上传视频','按获取线索量','按播放量排序'],
				groupStatusIndex:0,
				// 新上传视频
				newPage:1,
				newLastPage:1,
				videoModule:[
					
				],
				// 按获取线索量
				cluesPage:1,
				cluesLastPage:1,
				videoModuleClues:[
					
				],
				// 按播放量
				playPage:1,
				playLastPage:1,
				videoModulePlay:[
					
				],
				recomPagesize:15,
				
			}
		},
		filters: {
			getStr(str, new_length) {
			// console.log('getStr', str);
				if (!str) {
					return ''
				}
				if (str.length > new_length) {
					return str.slice(0, new_length) + '...'
				} else {
					return str
				}
			},
			formatDates(value) {
			let date = new Date(value * 1000);
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM;
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d;
			return y + '-' + MM + '-' + d;
			}
		},
		onLoad(options){
			this.getVideoEnrollment()
		},
		onShow() {
			this.getVideoEnrollment()
		},
		methods: {
			changeIndex(index){
				if( index == 0 ){
					this.getVideoEnrollment()
				}else if( index == 1 ){
					this.getVideoEnrollmentClues()
				}else{
					this.getVideoEnrollmentPlay()
				}
				this.groupStatusIndex = index
			},
			// 获取短视频招生
			getVideoEnrollment(){
				console.log("getVideoEnrollment",this.$store.getters.getToken)
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.$store.getters.getStoreId,
					page: 1,
					pagesize: 10
				}
				console.log("8888888");
				// 3.发送请求
				this.$api.get_videoEnrollment(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						this.newLastPage = res.data.last_page
						let video = res.data.data
						var a = []
						for (var i = 0; i < video.length; i++) {
						    if (video[i].is_top === 1) {
								a = video.splice(i, 1);
								video = a.concat(video)
							}
						}
						this.videoModule = video
						console.log(this.videoModule,'新上传视频')
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			LoadingVideoEnrollment(){
				this.newPage ++
				console.log(this.newPage)
				if(this.newPage <= this.newLastPage){
					let data = {
						token:this.$store.getters.getToken,
						store_id:this.$store.getters.getStoreId,
						page: this.newPage,
						pagesize: this.recomPagesize
					}
					this.$api.get_videoEnrollment(data).then(res=>{
						this.videoModule = this.videoModule.concat(res.data.data)
						console.log("上拉加载更多的数据.....")
						let video = this.videoModule
						var a = []
						for (var i = 0; i < video.length; i++) {
						    if (video[i].is_top === 1) {
								a = video.splice(i, 1);
								video = a.concat(video)
							}
						}
						this.videoModule = video
						console.log(this.videoModule,'新上传视频')
					}).catch(err => {
						console.log(err)
					})
				}else{
					uni.showToast({
						title:'没有更多了',
						icon:'none',
						duration:2000
					})
				}
			},
			// 获取短视频招生，按获取线索量排序
			getVideoEnrollmentClues(){
				console.log("getVideoEnrollment",this.$store.getters.getToken)
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.$store.getters.getStoreId,
					page: 1,
					pagesize: 10
				}
				console.log("8888888");
				// 3.发送请求
				this.$api.get_videoEnrollment(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						this.cluesLastPage = res.data.last_page
						let video = res.data.data
						let temp = []
						for(let i = 0; i < video.length-1; i++){
						    for(let j = 0;j < video.length-1; j++){
						        if(video[j].user_num < video[j+1].user_num){
						            temp = video[j];
						            video[j] = video[j+1];
						            video[j+1] = temp;
						        }
						    }
						}
						console.log(video,"54545454545454545454545454545454545454545454");
						var a = []
						for (var i = 0; i < video.length; i++) {
						    if (video[i].is_top === 1) {
								a = video.splice(i, 1);
								video = a.concat(video)
							}
						}
						this.videoModuleClues = video
						console.log(this.videoModuleClues,'按获取线索量')
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			LoadingClues(){
				this.cluesPage ++
				console.log(this.cluesPage)
				if(this.cluesPage <= this.cluesLastPage){
					let data = {
						token:this.$store.getters.getToken,
						store_id:this.$store.getters.getStoreId,
						page: this.cluesPage,
						pagesize: this.recomPagesize
					}
					this.$api.get_videoEnrollment(data).then(res=>{
						this.videoModuleClues = this.videoModuleClues.concat(res.data.data)
						console.log("上拉加载更多的数据.....")
						let video = this.videoModuleClues
						let temp = []
						for(let i = 0; i < video.length-1; i++){
						    for(let j = 0;j < video.length-1; j++){
						        if(video[j].user_num < video[j+1].user_num){
						            temp = video[j];
						            video[j] = video[j+1];
						            video[j+1] = temp;
						        }
						    }
						}
						console.log(video,"54545454545454545454545454545454545454545454");
						var a = []
						for (var i = 0; i < video.length; i++) {
						    if (video[i].is_top === 1) {
								a = video.splice(i, 1);
								video = a.concat(video)
							}
						}
						this.videoModuleClues = video
						console.log(this.videoModuleClues,'按获取线索量')
					}).catch(err => {
						console.log(err)
					})
				}else{
					uni.showToast({
						title:'没有更多了',
						icon:'none',
						duration:2000
					})
				}
			},
			// 获取短视频招生，按播放量排序
			getVideoEnrollmentPlay(){
				console.log("getVideoEnrollment",this.$store.getters.getToken)
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.$store.getters.getStoreId,
					page: 1,
					pagesize: 10
				}
				console.log("8888888");
				// 3.发送请求
				this.$api.get_videoEnrollment(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						this.playLastPage = res.data.last_page
						let video = res.data.data
						let temp = []
						for(let i = 0; i < video.length-1; i++){
						    for(let j = 0;j < video.length-1; j++){
						        if(video[j].access_num < video[j+1].access_num){
						            temp = video[j];
						            video[j] = video[j+1];
						            video[j+1] = temp;
						        }
						    }
						}
						var a = []
						for (var i = 0; i < video.length; i++) {
						    if (video[i].is_top === 1) {
								a = video.splice(i, 1);
								video = a.concat(video)
							}
						}
						this.videoModulePlay = video
						console.log(this.videoModulePlay,'按播放量排序')
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			LoadingPlay(){
				this.playPage ++
				console.log(this.playPage)
				if(this.playPage <= this.cluesLastPage){
					let data = {
						token:this.$store.getters.getToken,
						store_id:this.$store.getters.getStoreId,
						page: this.playPage,
						pagesize: this.recomPagesize
					}
					this.$api.get_videoEnrollment(data).then(res=>{
						this.videoModulePlay = this.videoModulePlay.concat(res.data.data)
						console.log("上拉加载更多的数据.....")
						let video = this.videoModulePlay
						let temp = []
						for(let i = 0; i < video.length-1; i++){
						    for(let j = 0;j < video.length-1; j++){
						        if(video[j].access_num < video[j+1].access_num){
						            temp = video[j];
						            video[j] = video[j+1];
						            video[j+1] = temp;
						        }
						    }
						}
						console.log(video,"54545454545454545454545454545454545454545454");
						var a = []
						for (var i = 0; i < video.length; i++) {
						    if (video[i].is_top === 1) {
								a = video.splice(i, 1);
								video = a.concat(video)
							}
						}
						this.videoModulePlay = video
						console.log(this.videoModulePlay,'按播放量排序')
					}).catch(err => {
						console.log(err)
					})
				}else{
					uni.showToast({
						title:'没有更多了',
						icon:'none',
						duration:2000
					})
				}
			},
			// 详情
			details(id){
				uni.navigateTo({
					url:"videoClue?topNavActiveIndex=0&user_num=" + id
				})
			},
			// 隐藏 & 置顶
			setVideo(id,type,value,ye){
				console.log("setVideo",this.$store.getters.getToken)
				let data = {
					token:this.$store.getters.getToken,
					id: id,
					upd_type: type,
					value: value,
				}
				console.log(data);
				console.log("8888888");
				// 3.发送请求
				this.$api.set_video(data).then(res => {
					console.log("修改成功");
					if( ye == 1){
						this.getVideoEnrollment()
					}else if( ye == 2 ){
						this.getVideoEnrollmentClues()
					}else if( ye == 3 ){
						this.getVideoEnrollmentPlay()
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 编辑
			modifyVideo(id){
				uni.navigateTo({
					url:"modifyVideoEnrollment?topNavActiveIndex=0&id=" + id
				})
			},
			addVideo(){
				uni.navigateTo({
					url:"addVideoEnrollment?topNavActiveIndex=0"
				})
			}
		}
	}
</script>

<style>
	.videoenrollment-header{
		padding: 20upx;
		background-color: #ffffff;
	}
	.group-state-contain{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		background: #F2F2F2;
		border-radius: 32upx;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		border-radius: 32upx;
	}
	.group-state-contain .group-state-active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.videoenrollment-content{
		margin: 30upx;
		padding: 50upx;
		border-radius: 16upx;
		background-color: #ffffff;
	}
	.edit-btn{
		position: absolute;
		right: 140upx;
		margin-top: 20upx;
		width: 14%;
		border-radius: 80upx;
		color: #ffffff;
		line-height: 50upx;
		z-index: 999;
		font-size: 24upx;
		border: none;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/member-center.png);
	}
	.edit-btn::after{
		border: none;
	}
	.hide-btn{
		position: absolute;
		display: inline-block;
		right: 70upx;
		font-size: 28upx;
		background-color: #ffffff;
		margin-top: 10upx;
		color: #2E89EB;
		border: none;
		
	}
	.hide-btn::after{
		border: none;
	}
	.topping-btn{
		position: absolute;
		display: inline-block;
		right: 70upx;
		font-size: 28upx;
		background-color: #ffffff;
		margin-top: -18upx;
		color: #2E89EB;
		border: none;
	}
	.topping-btn::after{
		border: none;
	}
	.details-btn{
		position: absolute;
		display: inline-block;
		right: 80upx;
		width: 110upx;
		line-height: 45upx;
		text-align: center;
		font-size: 24upx;
		border-radius: 15upx;
		background-color: #ffffff;
		border: 1upx solid #FF664F;
		color: #FF664F;
		border-radius: 45upx;
		margin-top: 10upx;
		vertical-align: middle;
	}
	.share-btn{
		height: 80upx;
		width: 638upx;
		color: #FFFFFF;
		font-size: 32rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		background-image: linear-gradient(90deg, #FE9543 14%, #FF664F 100%);
		border-radius: 44rpx;
	}
	.mechanism-content-workscard-label{
		position: absolute;
		margin-left: 45upx;
		font-size: 28upx;
		color: #ffffff;
		margin-top: 20upx;
		padding: 5upx 15upx;
		z-index: 99;
		background-size: 100% 100%;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/activity-collection-code.png);
	}
	.mechanism-content-workscard-label-yes{
		position: absolute;
		margin-left: 45upx;
		font-size: 28upx;
		color: #ffffff;
		margin-top: 20upx;
		padding: 5upx 15upx;
		z-index: 99;
		border-radius: 0upx 30upx 30upx 0upx;
		background-color: #1CB419;
	}
	.mechanism-content-workscard-label-no{
		position: absolute;
		margin-left: 45upx;
		font-size: 28upx;
		color: #ffffff;
		margin-top: 20upx;
		padding: 5upx 15upx;
		z-index: 99;
		border-radius: 0upx 30upx 30upx 0upx;
		background-color: #ff0000;
	}
</style>
